<template>
  <view class="dynamic" @click="clickDynamic()">
    <view class="inner-box">
      <view class="user__container">
        <view class="user__header-warp">
          <!-- 头像组 -->
          <view class="user__header" @click.stop="clickUser()">
            <image class="user__header-image" :src="avatar" mode="aspectFill"></image>
          </view>
        </view>
        <view class="user__content">
          <view class="user__content-main">
            <text class="user__content-title uni-ellipsis" @click.stop="clickUser()">
              {{ name }}
            </text>
            <text class="user__content-note uni-ellipsis">{{ publishTime }}</text>
          </view>
          <!-- <view class="user__content-extra">
						<slot>
							<text :class="getClass" @click.stop="clickFocus()">
								{{ isFocusOn ? '关注' : '已关注' }}
							</text>
						</slot>
					</view> -->
        </view>
      </view>

      <view class="text">{{ content }}</view>
      <view class="allVideo">
        <view class="vd-list" v-for="(item, index) in redioList" :key="index">
          <view v-if="item.type == '1'" style="flex: 1">
            <Cvideo :url="item.url" height="auto" width="100%" @play="tapNav" />
          </view>
          <view v-if="item.type == '2'" style="flex: 1">
            <sy-audio
              isCountDown
              ref="audio"
              :src="item.url"
              audioCover=""
              subheading=""
              :audioTitle="item.name"
              @nav="handleNav"
            ></sy-audio>
          </view>
        </view>
      </view>
      <!-- <view class="allImage">
				<view class="imgList">
					<view class="images" v-for="(item, index) in imgList" :key="index">
						<image
							@click.stop="previewImg()"
							class="oneimg"
							:src="item"
							mode="aspectFill"
							:style="{ width: imgWidth + 'px', 'max-height': imgHeight + 'px' }"
						></image>
					</view>
				</view>
			</view> -->
      <view class="operate">
        <uni-grid :column="3" :showBorder="false" :square="false">
          <uni-grid-item>
            <view class="icon-list" @click.stop="clickThumbsup()">
              <uni-icons
                v-if="isLike"
                color="#fc7110"
                type="heart-filled"
                size="18"
                :style="'margin-right: 2px;'"
              ></uni-icons>
              <uni-icons
                color="#666"
                v-else
                type="heart"
                size="18"
                :style="'margin-right: 2px;'"
              ></uni-icons>
              {{ likeNumber ? likeNumber : '点赞' }}
            </view>
          </uni-grid-item>
          <uni-grid-item>
            <view class="icon-list" @click.stop="clickGiveReward()">
              <uni-icons type="redo" size="18" :style="'margin-right: 2px;'"></uni-icons>
              <button
                size="mini"
                type="default"
                open-type="share"
                class="share-btn"
                style="margin: 0; padding: 0; background-color: transparent; color: #666; font-size: 14px; border: 0px;"
              >
                分享
              </button>
            </view>
          </uni-grid-item>
          <uni-grid-item>
            <view class="icon-list" @click.stop="clickChat()" style="border: 0">
              <uni-icons type="chat" size="20" style="margin-right: 2px"></uni-icons>
              {{ chatNumber ? chatNumber : '评论' }}
            </view>
          </uni-grid-item>
        </uni-grid>
      </view>
      <view class="comment-area" v-if="commentList.length > 0">
        <view class="comment-list" v-for="(item, index) in commentList" :key="index">
          <text class="name">{{ item.avatar }}：</text>
          <text class="com">{{ item.msg }}</text>
        </view>
      </view>
    </view>
    <view class="bottom-line"></view>
  </view>
</template>

<script>
import Cvideo from '@/components/c-video'
import ZAudio from '@/components/uniapp-zaudio'
export default {
  props: {
    avatar: {
      type: String
    },
    name: {
      type: String
    },
    publishTime: {
      type: [Number, String]
    },
    isFocusOn: {
      type: Boolean
    },
    content: {
      type: String
    },
    imgList: {
      type: Array
    },
    redioList: {
      type: Array
    },
    commentList: {
      type: Array
    },
    isLike: {
      type: Boolean
    },
    isGiveReward: {
      type: Boolean
    },
    likeNumber: {
      type: Number
    },
    giveRewardNumber: {
      type: Number
    },
    chatNumber: {
      type: Number
    },
    userNoShow: {
      type: Boolean
    },
    operateNoShow: {
      type: Boolean
    },
    itemAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    Cvideo
  },
  data() {
    return {
      windowWidth: 0, //屏幕可用宽度
      windowHeight: 0, //屏幕可用高度
      imgWidth: 0, //图片宽度
      imgHeight: 0, //图片高度
      thumbsupColor: 'gray',
      heartColor: 'gray',
      userDisplay: 'block',
      operateDisplay: 'block'
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    isLogin() {
      return this.$store.getters.token
    }
  },
  mounted() {
    const res = uni.getSystemInfoSync()
    this.windowHeight = res.windowHeight
    this.windowWidth = res.windowWidth

    if (this.userNoShow) {
      this.userDisplay = 'none'
    }
    if (this.operateNoShow) {
      this.operateDisplay = 'none'
    }

    this.judgeImg()
    this.initOperate()
  },
  methods: {
    handleNav() {
      let zaudio = new ZAudio({
        continuePlay: false, //续播
        autoPlay: true //自动播放 部分浏览器不支持
      })
      console.log(this.itemAll)
      var data = [
        {
          src: this.itemAll.articleAttaUrl,
          title: this.itemAll.articleTitle,
          singer: this.itemAll.userName,
          coverImgUrl: this.itemAll.avatarUrl
        }
      ]
      zaudio.setAudio(data) //添加音频
      zaudio.setRender(0) //渲染第一首音频
      // uni.navigateTo({
      //   url: `/pagesSub/play/audio?id=${item.articleId}`
      // })
    },
    tapNav(item) {
      this.$emit('play')
    },
    getClass() {
      return this.isFocusOn ? 'user__focus-on' : 'user__focus-off'
    },
    // 预览图片
    previewImg() {
      uni.previewImage({
        urls: this.imgList,
        longPressActions: {
          itemList: ['保存图片']
        }
      })
    },
    initOperate() {
      if (this.isLike) this.thumbsupColor = '#fc7110'
      if (this.isGiveReward) this.heartColor = '#fc7110'
    },
    // 自适应判断
    judgeImg() {
      if (this.imgList.length == 1) {
        this.imgWidth = (this.windowWidth * 2) / 3
        this.imgHeight = (this.windowHeight * 3) / 5
      } else if (this.imgList.length == 4) {
        this.imgWidth = this.windowWidth / 3.3
        this.imgHeight = this.imgWidth
      } else {
        this.imgWidth = this.windowWidth / 3.4
        this.imgHeight = this.imgWidth
      }
    },
    timestampFormat(timestamp) {
      if (!timestamp) return ''
      function zeroize(num) {
        return (String(num).length == 1 ? '0' : '') + num
      }

      var curTimestamp = parseInt(new Date().getTime() / 1000) //当前时间戳
      var timestampDiff = curTimestamp - timestamp // 参数时间戳与当前时间戳相差秒数

      var curDate = new Date(curTimestamp * 1000) // 当前时间日期对象
      var tmDate = new Date(timestamp * 1000) // 参数时间戳转换成的日期对象

      var Y = tmDate.getFullYear(),
        m = tmDate.getMonth() + 1,
        d = tmDate.getDate()
      var H = tmDate.getHours(),
        i = tmDate.getMinutes(),
        s = tmDate.getSeconds()

      if (timestampDiff < 60) {
        // 一分钟以内
        return '刚刚'
      } else if (timestampDiff < 3600) {
        // 一小时前之内
        return Math.floor(timestampDiff / 60) + '分钟前'
      } else if (
        curDate.getFullYear() == Y &&
        curDate.getMonth() + 1 == m &&
        curDate.getDate() == d
      ) {
        return '今天' + zeroize(H) + ':' + zeroize(i)
      } else {
        var newDate = new Date((curTimestamp - 86400) * 1000) // 参数中的时间戳加一天转换成的日期对象
        if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
          return '昨天' + zeroize(H) + ':' + zeroize(i)
        } else if (curDate.getFullYear() == Y) {
          return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        } else {
          return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i)
        }
      }
    },

    /** 触发父级事件 */
    // 点击动态
    clickDynamic() {
      this.$emit('clickDynamic')
    },
    // 点击用户信息
    clickUser() {
      this.$emit('clickUser')
    },
    // 点击关注
    clickFocus() {
      this.$emit('clickFocus')
    },
    // 点赞
    clickThumbsup() {
      this.$emit('clickThumbsup')
    },
    // 点击打赏
    clickGiveReward() {
      this.$emit('clickGiveReward')
    },
    // 点击聊天
    clickChat() {
      this.$emit('clickChat')
    }
  }
}
</script>

<style lang="less" scoped>
.share-btn{
  line-height: 24px;
  &::after{
    border: 0;
  }
}
/* 想法图片排列样式 */
.uni-list-chat__content-extra-text {
  color: #007aff;
}
.dynamic {
  .inner-box {
    border-radius: 10px;
    background-color: #fff;
    padding: 20rpx;
    box-shadow: 0px 2px 3px #efefef;
  }
}
.text {
  line-height: 40rpx;
  color: #333333;
}
.allImage {
  display: flex;
  margin-top: 10rpx;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.allVideo {
  background-color: #fafafa;
  margin-top: 20rpx;
  padding: 30rpx 20rpx;
  border-radius: 10px;
  .vd-list {
    display: flex;
    align-items: center;
  }
  .redio-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fc7110;
    box-shadow: 0px 0px 5px #cfcfcf;
    margin-right: 20rpx;
  }
}
.imgList {
  margin: 0 3%;
}
.images {
  margin-right: 10rpx;
  display: inline-block;
}
.operate {
  font-size: 14px;
  margin-top: 20rpx;
}
.chat-custom-right {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.chat-custom-text {
  font-size: 12px;
  color: #999;
}
.bottom-line {
  height: 10px;
}

.user__container {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  /* -webkit-flex-direction: row; */
  flex-direction: row;
  -webkit-box-flex: 1;
  /* -webkit-flex: 1; */
  flex: 1;
  padding-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.user__header {
  display: flex;
  width: 45px;
  height: 45px;
  -webkit-border-radius: 5px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  border-radius: 50%;
  overflow: hidden;
}
.user__header-image {
  display: flex;
  align-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  flex-wrap: wrap-reverse;
  width: 45px;
  height: 45px;
  border-radius: 5px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
}
.user__content {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-flex: 1;
  flex: 1;
  overflow: hidden;
  padding: 2px 0;
}
.user__content-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding-left: 10px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
}
.user__content-note {
  margin-top: 3px;
  color: #999;
  font-size: 12px;
  font-weight: normal;
  overflow: hidden;
}
.user__focus-on {
  padding: 3px 10px;
  border: 1px solid #fb5f5f;
  color: #fb5f5f;
  display: flex;
  font-size: 14px;
  border-radius: 3px;
}
.user__focus-off {
  padding: 3px;
  color: gray;
  font-size: 14px;
}
.icon-list {
  display: flex;
  align-items: center;
  color: #666666;
  justify-content: center;
  border-right: 1px #e9e9e9 solid;
}
.comment-area {
  background-color: #fafafa;
  padding: 20rpx;
  margin-top: 20rpx;
  border-radius: 10px;
  .comment-list {
    margin-bottom: 20rpx;
    .name {
      color: #fc7110;
    }
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
</style>
